<template>
	<view class="my-settle-cls">
		<!-- 全选框 -->
		<label class="radio" @click="allCheckedHandler">
			<radio color="#C00000" :checked="isFullChecked" /><text>全选</text>
		</label>
		<!-- 合计 -->
		<view class="amount-box">
			合计:<text class="amount">${{settleGoodsAmount}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="btn-settle" @click="settleAmount">结算:({{checkCount}})</view>
	</view>
</template>

<script>
	import { mapState,mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// tips的倒计时  关闭的秒数
				seconds:3,
				timer:''
			}
		},
		computed:{
			...mapState('m_user', ['token']),
			...mapGetters('m_cart',['checkCount','total','settleGoodsAmount']),
			...mapGetters('m_user',['addstr']),
			isFullChecked(){
				return this.total === this.checkCount
			}
		},
		methods: {
			...mapMutations('m_cart',['updateAllGoodsState']),
			...mapMutations('m_user',['updateRedirectInfo']),
			//点击全选
			allCheckedHandler(){
				this.updateAllGoodsState(!this.isFullChecked)
			},
			//结算
			settleAmount(){
				// 3. 最后判断用户是否登录了
				if(!this.token){
					// return uni.showToast({
					// 	title:"用户未登录"
					// })
					return this.delayNavigate()
				}
				// 1. 先判断是否勾选了要结算的商品
				if(this.checkCount === 0){
					return uni.showToast({
						title:"请选择要结算的商品！"
					})
				}
				// 2. 再判断用户是否选择了收货地址
				if(!this.addstr){
					return uni.showToast({
						title:"请选择收货地址"
					})
				}
			},
			//展示倒计时提示消息
			showTips(n){
				uni.showToast({
					icon:"none",
					title:"请登录后在结算" + n + "秒之后跳转到结算页面",
					mask:true,
					duration:1500
				})
			},
			// 实现倒计时功能
			delayNavigate(){
				this.seconds = 3
				this.showTips(this.seconds)
				this.timer = setInterval(()=>{
					this.seconds--
					if(this.seconds <=0 ){
						clearInterval(this.timer)
						//跳转到登录页
						uni.switchTab({
							url:'/pages/member/member',
							// 页面跳转成功调用函数
							success:()=>{
								this.updateRedirectInfo({
									// 跳转的方式
									openType: 'switchTab',
									// 从哪个页面跳转过去的
									from: '/pages/cart/cart'
								})
							}
						})
						return
					}
					this.showTips(this.seconds)
				},1000)
			}
			
			
		}
	}
</script>

<style lang="scss">
	.my-settle-cls{
		height: 150px;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 5px;
		font-size: 14px;
		.radio {
			display: flex;
			align-items: center;
		}
		.amount {
			color: #c00000;
		}
		.btn-settle {
		    height: 50px;
		    min-width: 100px;
		    background-color: #c00000;
		    color: white;
		    line-height: 50px;
		    text-align: center;
		    padding: 0 10px;
		}
	}
	
</style>
